'use client';
import React, { useState } from 'react';
import {
  Card,
  CardContent,
  CardTitle,
  CardDescription,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

const ModalSettingsPage = () => {
  // 模拟选中状态
  const [selectedNavItem, setSelectedNavItem] = useState(0);

  // 导航项数据
  const navItems = [
    { id: 1, icon: '⚙️' },
    { id: 2, icon: '🔔' },
    { id: 3, icon: '📊' },
    { id: 4, icon: '🔒' },
    { id: 5, icon: '🎨' },
    { id: 6, icon: '💬' },
  ];

  // 设置项数据
  const settingsCards = [
    {
      id: 1,
      title: '淘宝',
      icon: '🛒',
      description: '基础模态框配置',
      color: 'bg-red-500',
      bgColor: 'bg-red-100',
    },
    {
      id: 2,
      title: '天猫',
      icon: '🐱',
      description: '提醒和通知偏好',
      color: 'bg-blue-500',
      bgColor: 'bg-blue-100',
    },
    {
      id: 3,
      title: '拼多多',
      icon: '💰',
      description: '图表和数据可视化',
      color: 'bg-green-500',
      bgColor: 'bg-green-100',
    },
    {
      id: 4,
      title: '京东',
      icon: '🛍️',
      description: '访问权限管理',
      color: 'bg-yellow-500',
      bgColor: 'bg-yellow-100',
    },
    {
      id: 5,
      title: '抖音',
      icon: '🎵',
      description: '颜色和布局设置',
      color: 'bg-purple-500',
      bgColor: 'bg-purple-100',
    },
    {
      id: 6,
      title: '小红书',
      icon: '📕',
      description: '界面语言选择',
      color: 'bg-pink-500',
      bgColor: 'bg-pink-100',
    },
  ];

  return (
    <div className="flex h-screen bg-gray-50 overflow-hidden">
      {/* 侧边导航 */}
      <div className="w-16 bg-white border-r border-gray-200 flex flex-col items-center py-8 space-y-8">
        {navItems.map((item, index) => (
          <button
            key={item.id}
            onClick={() => setSelectedNavItem(index)}
            className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${index === selectedNavItem ? 'bg-blue-500 text-white shadow-md' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}
            aria-label={`导航项 ${item.id}`}
          >
            {item.icon}
          </button>
        ))}
      </div>

      {/* 主内容容器 */}
      <div className="flex-1 flex overflow-auto">
        {/* 表单项设置区域 */}
        <div className="bg-white border border-gray-200 p-6 shadow-sm w-full h-100% max-w-sm">
          <h2 className="text-xl font-semibold text-gray-800 mb-6">基础配置</h2>
          <div className="grid grid-cols-1 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                模型
              </label>
              <select className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option>模型A</option>
                <option>模型B</option>
                <option>模型C</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                MCP
              </label>
              <select className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option>居中显示</option>
                <option>左上角</option>
                <option>右上角</option>
                <option>左下角</option>
                <option>右下角</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                todo
              </label>
              <input
                type="number"
                className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="输入宽度值"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                托管店铺
              </label>
              <select className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option>店铺1</option>
                <option>店铺2</option>
                <option>店铺3</option>
              </select>
            </div>
            {/* <div>
              <label className="flex items-center">
                <input
                  type="checkbox"
                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
                <span className="ml-2 block text-sm text-gray-700">
                  显示关闭按钮
                </span>
              </label>
            </div>
            <div>
              <label className="flex items-center">
                <input
                  type="checkbox"
                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
                <span className="ml-2 block text-sm text-gray-700">
                  允许点击外部关闭
                </span>
              </label>
            </div> */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                提示词
              </label>
              <textarea
                className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="输入提示词"
                rows={4}
              ></textarea>
            </div>
          </div>
          <div className="mt-6 flex justify-end space-x-3">
            <Button
              variant="outline"
              className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
            >
              取消
            </Button>
            <Button
              variant="default"
              className="px-4 py-2 bg-blue-600 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              保存设置
            </Button>
          </div>
        </div>

        {/* 主内容区 */}
        <div className=" p-8 overflow-auto flex-1">
          <h1 className="text-2xl font-bold text-gray-800 mb-8">分类知识库</h1>
          {/* 设置卡片网格 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {settingsCards.map((card) => (
              <Card
                key={card.id}
                className="transition-all duration-300 hover:shadow-lg border-2 rounded-lg"
                style={{ borderColor: card.color.replace('bg-', '') }}
              >
                <CardContent>
                  <div className="flex items-center mb-2 relative -top-2">
                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                      {card.icon}
                    </div>
                    <div>
                      <h3
                        className="text-lg font-bold"
                        style={{ color: card.color.replace('bg-', '') }}
                      >
                        {card.title}知识库
                      </h3>
                      {/* <p className="text-gray-500 text-sm mt-1">
                        {card.description}
                      </p> */}
                    </div>
                  </div>
                  <div className="w-full h-0.5 bg-gray-200"></div>
                </CardContent>
                <div className="h-[150px] overflow-auto pl-6 pr-6 py-4 bg-gray-50 rounded-lg">
                  <div className="flex flex-wrap gap-4">
                    {/* PDF文件 */}
                    <div className="w-28 h-36 flex flex-col items-center p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                      <div className="w-12 h-12 rounded-md bg-red-100 flex items-center justify-center mb-2">
                        <span className="text-red-500 font-bold text-base">
                          PDF
                        </span>
                      </div>
                      <div className="text-center">
                        <p className="text-sm font-medium text-gray-900 truncate mb-1">
                          运营策略文档.pdf
                        </p>
                        <p className="text-xs text-gray-500">2.4 MB</p>
                        <p className="text-xs text-gray-400">2025/01/28</p>
                      </div>
                    </div>

                    {/* Word文件 */}
                    <div className="w-28 h-36 flex flex-col items-center p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                      <div className="w-12 h-12 rounded-md bg-blue-100 flex items-center justify-center mb-2">
                        <span className="text-blue-500 font-bold text-base">
                          DOC
                        </span>
                      </div>
                      <div className="text-center">
                        <p className="text-sm font-medium text-gray-900 truncate mb-1">
                          活动策划方案.docx
                        </p>
                        <p className="text-xs text-gray-500">1.8 MB</p>
                        <p className="text-xs text-gray-400">2025/01/26</p>
                      </div>
                    </div>

                    {/* Excel文件 */}
                    <div className="w-28 h-36 flex flex-col items-center p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                      <div className="w-12 h-12 rounded-md bg-green-100 flex items-center justify-center mb-2">
                        <span className="text-green-500 font-bold text-base">
                          XLS
                        </span>
                      </div>
                      <div className="text-center">
                        <p className="text-sm font-medium text-gray-900 truncate mb-1">
                          销售数据分析.xlsx
                        </p>
                        <p className="text-xs text-gray-500">3.2 MB</p>
                        <p className="text-xs text-gray-400">2025/01/25</p>
                      </div>
                    </div>

                    {/* Text文件 */}
                    <div className="w-28 h-36 flex flex-col items-center p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                      <div className="w-12 h-12 rounded-md bg-gray-100 flex items-center justify-center mb-2">
                        <span className="text-gray-500 font-bold text-base">
                          TXT
                        </span>
                      </div>
                      <div className="text-center">
                        <p className="text-sm font-medium text-gray-900 truncate mb-1">
                          产品需求清单.txt
                        </p>
                        <p className="text-xs text-gray-500">456 KB</p>
                        <p className="text-xs text-gray-400">2025/01/24</p>
                      </div>
                    </div>

                    {/* Excel文件 */}
                    {/* <div className="flex items-center p-2 hover:bg-gray-100 rounded-md transition-colors">
                      <div className="w-8 h-8 rounded-md bg-green-100 flex items-center justify-center mr-3">
                        <span className="text-green-500 font-bold">XLS</span>
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-900 truncate">销售数据分析.xlsx</p>
                        <p className="text-xs text-gray-500">3.2 MB · 2025/01/25</p>
                      </div>
                    </div> */}

                    {/* Text文件 */}
                    {/* <div className="flex items-center p-2 hover:bg-gray-100 rounded-md transition-colors">
                      <div className="w-8 h-8 rounded-md bg-gray-100 flex items-center justify-center mr-3">
                        <span className="text-gray-500 font-bold">TXT</span>
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-900 truncate">产品需求清单.txt</p>
                        <p className="text-xs text-gray-500">456 KB · 2025/01/24</p>
                      </div>
                    </div> */}
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ModalSettingsPage;
